﻿<UserControl x:Class="Squiggle.UI.Controls.VoiceChatToolbarControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:converters="clr-namespace:Squiggle.UI.Converters"
            x:Name="voiceChatToolbarControl">
    <UserControl.Resources>
        <Style x:Key="RoundToggleButton" TargetType="{x:Type ToggleButton}">
            <Setter Property="SnapsToDevicePixels" Value="True"/>
            <Setter Property="OverridesDefaultStyle" Value="True"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Grid>
                            <!-- Background Layer -->
                            <Ellipse Fill="{TemplateBinding Background}"/>
                            <!-- Refraction Layer -->
                            <Ellipse x:Name="RefractionLayer">
                                <Ellipse.Fill>
                                    <RadialGradientBrush GradientOrigin="0.496,1.052">
                                        <RadialGradientBrush.RelativeTransform>
                                            <TransformGroup>
                                                <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.5" ScaleY="1.5"/>
                                                <TranslateTransform X="0.02" Y="0.3"/>
                                            </TransformGroup>
                                        </RadialGradientBrush.RelativeTransform>
                                        <GradientStop Offset="1" Color="#00000000"/>
                                        <GradientStop Offset="0.4" Color="#FFFFFFFF"/>
                                    </RadialGradientBrush>
                                </Ellipse.Fill>
                            </Ellipse>
                            <!-- Reflection Layer -->
                            <Path x:Name="ReflectionLayer" VerticalAlignment="Top" Stretch="Fill">
                                <Path.RenderTransform>
                                    <ScaleTransform ScaleY="0.5" />
                                </Path.RenderTransform>
                                <Path.Data>
                                    <PathGeometry>
                                        <PathFigure IsClosed="True" StartPoint="98.999,45.499">
                                            <BezierSegment Point1="98.999,54.170" Point2="89.046,52.258" Point3="85.502,51.029"/>
                                            <BezierSegment
                                    IsSmoothJoin="True"
                                    Point1="75.860,47.685"
                                    Point2="69.111,45.196"
                                    Point3="50.167,45.196"/>
                                            <BezierSegment Point1="30.805,45.196" Point2="20.173,47.741" Point3="10.665,51.363"/>
                                            <BezierSegment
                                    IsSmoothJoin="True"
                                    Point1="7.469,52.580"
                                    Point2="1.000,53.252"
                                    Point3="1.000,44.999"/>
                                            <BezierSegment Point1="1.000,39.510" Point2="0.884,39.227" Point3="2.519,34.286"/>
                                            <BezierSegment
                                    IsSmoothJoin="True"
                                    Point1="9.106,14.370"
                                    Point2="27.875,0"
                                    Point3="50,0"/>
                                            <BezierSegment Point1="72.198,0" Point2="91.018,14.466" Point3="97.546,34.485"/>
                                            <BezierSegment
                                    IsSmoothJoin="True"
                                    Point1="99.139,39.369"
                                    Point2="98.999,40.084"
                                    Point3="98.999,45.499"/>
                                        </PathFigure>
                                    </PathGeometry>
                                </Path.Data>
                                <Path.Fill>
                                    <RadialGradientBrush GradientOrigin="0.498,0.526">
                                        <RadialGradientBrush.RelativeTransform>
                                            <TransformGroup>
                                                <ScaleTransform
                                       CenterX="0.5"
                                       CenterY="0.5"
                                       ScaleX="1"
                                       ScaleY="1.997"/>
                                                <TranslateTransform X="0" Y="0.5"/>
                                            </TransformGroup>
                                        </RadialGradientBrush.RelativeTransform>
                                        <GradientStop Offset="1" Color="#FFFFFFFF"/>
                                        <GradientStop Offset="0.85" Color="#92FFFFFF"/>
                                        <GradientStop Offset="0" Color="#00000000"/>
                                    </RadialGradientBrush>
                                </Path.Fill>
                            </Path>
                            <!-- ContentPresenter -->
                            <ContentPresenter Margin="0,2,0,0" HorizontalAlignment="Center" VerticalAlignment="Center"/>


                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="RefractionLayer" Property="Fill">
                                    <Setter.Value>
                                        <RadialGradientBrush GradientOrigin="0.496,1.052">
                                            <RadialGradientBrush.RelativeTransform>
                                                <TransformGroup>
                                                    <ScaleTransform
                                          CenterX="0.5"
                                          CenterY="0.5"
                                          ScaleX="1.5"
                                          ScaleY="1.5"/>
                                                    <TranslateTransform X="0.02" Y="0.3"/>
                                                </TransformGroup>
                                            </RadialGradientBrush.RelativeTransform>
                                            <GradientStop Offset="1" Color="#00000000"/>
                                            <GradientStop Offset="0.45" Color="#FFFFFFFF"/>
                                        </RadialGradientBrush>
                                    </Setter.Value>
                                </Setter>
                                <Setter TargetName="ReflectionLayer" Property="Fill">
                                    <Setter.Value>
                                        <RadialGradientBrush GradientOrigin="0.498,0.526">
                                            <RadialGradientBrush.RelativeTransform>
                                                <TransformGroup>
                                                    <ScaleTransform
                                          CenterX="0.5"
                                          CenterY="0.5"
                                          ScaleX="1"
                                          ScaleY="1.997"/>
                                                    <TranslateTransform X="0" Y="0.5"/>
                                                </TransformGroup>
                                            </RadialGradientBrush.RelativeTransform>
                                            <GradientStop Offset="1" Color="#FFFFFFFF"/>
                                            <GradientStop Offset="0.85" Color="#BBFFFFFF"/>
                                            <GradientStop Offset="0" Color="#00000000"/>
                                        </RadialGradientBrush>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter TargetName="RefractionLayer" Property="Fill">
                                    <Setter.Value>
                                        <RadialGradientBrush GradientOrigin="0.496,1.052">
                                            <RadialGradientBrush.RelativeTransform>
                                                <TransformGroup>
                                                    <ScaleTransform
                                          CenterX="0.5"
                                          CenterY="0.5"
                                          ScaleX="1.5"
                                          ScaleY="1.5"/>
                                                    <TranslateTransform X="0.02" Y="0.3"/>
                                                </TransformGroup>
                                            </RadialGradientBrush.RelativeTransform>
                                            <GradientStop Offset="1" Color="#00000000"/>
                                            <GradientStop Offset="0.3" Color="#FFFFFFFF"/>
                                        </RadialGradientBrush>
                                    </Setter.Value>
                                </Setter>
                                <Setter TargetName="ReflectionLayer" Property="Fill">
                                    <Setter.Value>
                                        <RadialGradientBrush GradientOrigin="0.498,0.526">
                                            <RadialGradientBrush.RelativeTransform>
                                                <TransformGroup>
                                                    <ScaleTransform
                                          CenterX="0.5"
                                          CenterY="0.5"
                                          ScaleX="1"
                                          ScaleY="1.997"/>
                                                    <TranslateTransform X="0" Y="0.5"/>
                                                </TransformGroup>
                                            </RadialGradientBrush.RelativeTransform>
                                            <GradientStop Offset="1" Color="#CCFFFFFF"/>
                                            <GradientStop Offset="0.85" Color="#66FFFFFF"/>
                                            <GradientStop Offset="0" Color="#00000000"/>
                                        </RadialGradientBrush>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="toolbarToggleButton" BasedOn="{StaticResource RoundToggleButton}" TargetType="{x:Type ToggleButton}">
            <Setter Property="Height" Value="25" />
            <Setter Property="Width" Value="25" />
            <Setter Property="Background" Value="#704682B4" />
        </Style>
        <converters:VoiceChatToVisibilityConverter x:Key="visibiltyConverter" />
        <Image x:Key="muteImage" Source="..\Images\vc-unmute.png" ToolTip="{DynamicResource VoiceChat_Mute}"/>
        <Image x:Key="unmuteImage" Source="..\Images\vc-mute.png" ToolTip="{DynamicResource VoiceChat_Unmute}"/>

        <Style x:Key="muteUnmuteStyle" TargetType="{x:Type ToggleButton}" BasedOn="{StaticResource toolbarToggleButton}"  >
            <Setter Property="Content" Value="{StaticResource muteImage}"/>
            <Style.Triggers>
                <Trigger Property="IsChecked" Value="True">
                    <Setter Property="Content" Value="{StaticResource unmuteImage}" />
                </Trigger>
                <Trigger Property="IsChecked" Value="False">
                    <Setter Property="Content" Value="{StaticResource muteImage}"/>
                </Trigger>
            </Style.Triggers>            
        </Style>
    </UserControl.Resources>
    <Grid>
        <Button IsEnabled="{Binding RelativeSource={RelativeSource AncestorType=UserControl}, Path=IsEnabled}" Style="{DynamicResource toolbarButton}" HorizontalAlignment="Right" Visibility="{Binding ElementName=voiceChatToolbarControl, Path=VoiceChatContext, Converter={StaticResource visibiltyConverter}, ConverterParameter=voicechatoff}"
                                    Margin="5,0,0,0" ToolTip="{DynamicResource VoiceChat_Start}"
                                    Click="StartVoiceChat_Click" Foreground="Black">
            <Image Width="16" Height="16" Source="../Images/vc-startcall.png" Stretch="Fill"/>
        </Button>
        <Grid x:Name="grdVoiceChatActivated" Visibility="{Binding ElementName=voiceChatToolbarControl, Path=VoiceChatContext, Converter={StaticResource visibiltyConverter}, ConverterParameter=voicechaton}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <Button Style="{DynamicResource toolbarButton}" Margin="10,0,5,0" HorizontalAlignment="Right"
                                    ToolTip="{DynamicResource VoiceChat_End}"
                                    Click="StopVoiceChat_Click" Foreground="Black">
                <Image Width="16" Height="16" Source="../Images/vc-endcall.png" Stretch="Fill"/>
            </Button>
            <ToggleButton BorderThickness="0" Margin="5,0,5,0" Grid.Column="1" Style="{StaticResource muteUnmuteStyle}" IsChecked="{Binding ElementName=voiceChatToolbarControl, Path=VoiceChatContext.IsMuted, Mode=TwoWay}">
            </ToggleButton>
            <Slider x:Name="volume" Margin="2,0,2,0" VerticalAlignment="Center" Grid.Column="2" Width="100" Minimum="0" Maximum="1" Value="{Binding ElementName=voiceChatToolbarControl, Path=VoiceChatContext.Volume, Mode=TwoWay}" IsSnapToTickEnabled="True" TickFrequency="0.1"/>
        </Grid>
    </Grid>
</UserControl>
